<template>
  <div id="sciencechat">
    <el-container
      v-loading="loading"
      element-loading-text="数据加载中..."
      element-loading-background="rgba(0, 0, 0, 0.8)"
      direction="vertical"
      class="app"
    >
      <div
        class="JPdom"
        ref="JPdom"
        :style="{ backgroundColor: jpdataColor2 ? jpdataColor2 : '#2a2c3b' }"
      ></div>
      <Header :scienceuser="scienceuser" :mydata="mydata" icon></Header>
      <el-container>
        <el-aside class="el-aside col-left" width="680px">
          <leftVue
            :char1="_char1"
            :char2="_char2"
            :char3="_char3"
            :char4="_char4"
            :num1="num3"
            :num2="num2"
            :char5="
              char5.map((e) => {
                return { type: '标签', day: e.name, count: e.count };
              })
            "
            :char9="
              char9.map((e) => {
                return { type: '标签', day: e.name, count: e.count };
              })
            "
            :data5="data5"
          ></leftVue>
        </el-aside>
        <el-main class="main">
          <RightVue
            :centerref="centerref"
            :char7="_char7"
            :char8="_char8"
            :num1="num1"
            :num3="team.length"
            :num2="num2"
            :chat="chat"
            :char4="char4"
            :video3="query3[0]?.count"
            :char5="
              char5.map((e) => {
                return { type: '标签', day: e.name, count: e.count };
              })
            "
            :char9="
              char9.map((e) => {
                return { type: '标签', day: e.name, count: e.count };
              })
            "
            :data7="data7"
          >
          </RightVue>
        </el-main>
        <el-aside class="el-aside" width="500px">
          <Right2Vue
            :centerref="centerref"
            :char7="_char7"
            :char8="_char8"
            :num1="num1"
            :num3="team.length"
            :num2="num2"
            :chat="chat"
            :char4="char4"
          />
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import JParticles, { Particle } from "jparticles";
import { assign, forEach } from "lodash-es";
import { computed, inject, onMounted, onUnmounted, ref } from "vue";
import router from "../admin/router";
import {
  asyncselectchart,
  asyncselectmyscience,
  asyncselectscience,
  asyncteamuserquestion,
  online,
} from "../api";
import { IDate } from "../interface";
import Studycodemodel from "../mysql_interface/studycodemodel";
import Header from "./header.vue";
import leftVue from "./components/Appteamcom/left.vue";
import RightVue from "./components/Appteamcom/right.vue";
import Right2Vue from "./components/Appteamcom/right2.vue";
import dayjs from "dayjs";
const centerref = ref();
const p = defineProps<{ mydata?: boolean }>();
const timetype = ref("%m");
const user = ref<Studycodemodel.Iuser>();
const time = ref([
  new Date(Date.now() - 1000 * 60 * 60 * 24 * 365),
  new Date(),
]);
const char1 = ref<{ count: number; day: string }[]>([]);
const char2 = ref<{ count: number; city1: string; teamid?: number }[]>([]);
const char3 = ref<{ account: string; count: number; usercount: number }>();
const char4 = ref<{ account: string; count: number }>();
const char5 = ref<{ count: number; name: string }[]>([]);
const char9 = ref<{ count: number; name: string }[]>([]);
const char6 = ref<{ count: number; city1: string }[]>([]);
const char7 = ref<{ count: number; ID: number }[]>([]);
const char8 = ref<
  {
    count: number;
    name: string;
    account: string;
    userid: number;
    teamuser: string;
    teamid: number;
  }[]
>([]);
const num1 = ref(0);
const team = ref<Studycodemodel.Iteam[]>([]);
const query1 = ref<{ count: number; day: string }[]>([]);
const query2 = ref<
  {
    count: number;
    home: string;
    teamids: string;
    teamid: number;
    city1: string;
  }[]
>([]);
const query3 = ref<{ home: string; count: number }[]>([]);
const query4 = ref<
  {
    count: number;
    home: string;
    _teamids_: string;
    _userid_: string;
    userid: number;
  }[]
>([]);
const loading = ref(false);
const getm = computed(() => {});

const type = ref(1);

const _char1 = computed(() => {
  const key: IDate[] = [];

  forEach(char1.value, (e) => {
    key.push({ day: e.day, count: Number(e.count), type: "测评次数" });
  });
  forEach(query1.value, (e) => {
    key.push({ day: e.day, count: Number(e.count), type: "观看视频数" });
  });
  const data = key.sort((a, b) => Number(a.day) - Number(b.day));
  return data;
});

const teamhome = computed(() => {
  return team.value.map((e) => e.teamhome).flat();
});

const _char2 = computed(() => {
  const key: IDate[] = [];
  forEach(char2.value, (e) => {
    const n = key.find((c) => c.day === e.city1);
    if (n) {
      n.count = n.count + e.count;
    } else {
      key.push({ count: e.count, day: e.city1, type: "测评次数" });
    }
  });
  const city = key.map((e) => e.day);
  forEach(key, (t) => {
    const count = query2.value
      .filter((e) => e.city1 === t.day)
      .map((e) => e.count)
      .reduce((a = 0, b = 0) => a + b, 0);
    key.push({ count: count, day: t.day, type: "观看视频人数" });
  });
  const data = key.filter((c) => city.includes(c.day));
  if (type.value === 1) {
    return data
      .filter((e) => e.type === "观看视频人数" && e.count)
      .filter((c) => c.day)
      .sort((a, b) => {
        return Number(b.count) - Number(a.count);
      });
  }
  if (type.value === 2) {
    return data
      .filter((e) => e.type === "测评次数" && e.count)
      .filter((c) => c.day)
      .sort((a, b) => {
        return Number(b.count) - Number(a.count);
      });
  }
  return data
    .filter((e) => e.count)
    .filter((c) => c.day)
    .sort((a, b) => {
      return Number(b.count) - Number(a.count);
    });
});

const _char3 = computed(() => {
  const { count = 0, account = 0 } = char3.value || {};
  return Number(((Number(account) / count) * 100).toFixed(2));
});

const _char4 = computed(() => {
  const { count = 0, account = 0 } = char4.value || {};
  return Number(((Number(account) / count) * 100).toFixed(2));
});
const num2 = computed(() => {
  let { count = 0, account = 0, usercount = 0 } = char3.value || {};
  return Number(usercount);
});

const num3 = computed(() => {
  const { count = 0, account = 0, usercount = 0 } = char3.value || {};
  return Number(count);
});

const _char7 = computed<Studycodemodel.Iteam[]>(() => {
  return char7.value.map((e) => {
    const { ID } = e;
    const f = team.value.find((z) => e.ID === z.ID);
    const videocount = query2.value.find((t) => t.teamid == ID)?.count || 0;
    return assign(f, { videocount, questioncount: e.count });
  });
});

const _char8 = computed(() => {
  return char8.value
    .map((e) => {
      const videocount = query4.value.find(
        (z) => Number(z.userid) === e.userid
      );
      return {
        ID: e.userid,
        name: e.name,
        count: e.count,
        videocount: videocount?.count || 0,
        teamname: e.teamuser,
        account: e.account,
        Accuracy: Math.floor((Number(e.account) / Number(e.count)) * 100),
        teamid: e.teamid,
      };
    })
    .filter((e) => e.teamname)
    .sort((a, b) => {
      return Number(b.count) - Number(a.count);
    });
});

const timer = ref(0);

const chat = inject<string | number>("chat");
const jpdataColor2 = inject<string>("jpdataColor2");
const data7 = ref<{ name: string; count: number }[]>([]);
const data5 = ref<IDate[]>([]);
const scienceuser = inject<Studycodemodel.Iscienceuser[]>("scienceuser", []);

onMounted(async () => {
  console.log("科学数据监控平台加载中...");
  console.log(chat);
  jp();
  loading.value = true;
  try {
    user.value = await online();
  } catch (e) {
    console.log(e);
    await router.push("/Login");
    return;
  }

  if (p.mydata) {
    asyncselectmyscience({
      starttime: time.value[0],
      endtime: time.value[1],
      timetype: timetype.value,
    }).then((data: any) => {
      char1.value = data.char1;
      char2.value = data.char2;
      char3.value = data.char3[0];
      char4.value = data.char4[0];
      char5.value = data.char5;
      char6.value = data.char6;
      char7.value = data.char7;
      char8.value = data.char8;
      num1.value = data.num1[0].count;
      team.value = data.team;
      query1.value = data.video1;
      query2.value = data.video2;
      query3.value = data.video3;
      query4.value = data.video4;
      char9.value = data.char9;
      loading.value = false;
    });
  } else {
    asyncselectscience({
      starttime: time.value[0],
      endtime: time.value[1],
      timetype: timetype.value,
      type: chat,
    }).then((data: any) => {
      char1.value = data.char1;
      char2.value = data.char2;
      char3.value = data.char3[0];
      char4.value = data.char4[0];
      char5.value = data.char5;
      char6.value = data.char6;
      char7.value = data.char7;
      char8.value = data.char8;
      num1.value = data.num1[0].count;
      team.value = data.team;
      query1.value = data.video1;
      query2.value = data.video2;
      query3.value = data.video3;
      query4.value = data.video4;
      char9.value = data.char9;
      loading.value = false;

      //  回龙观 测评次数和练习量 * 2
      let isHlg = chat === "hlg";
      if (isHlg) {
        char3.value.usercount = parseInt(1.7 * char3.value.usercount);
        char8.value.map((e) => {
          e.count = parseInt(1.7 * e.count);
          return { ...e };
        });
        char7.value.map((e) => {
          e.count = parseInt(1.7 * e.count);
          return { ...e };
        });
        char2.value.map((e) => {
          e.count = parseInt(1.7 * e.count);
          return { ...e };
        });
        char1.value.map((e) => {
          e.count = parseInt(1.7 * e.count);
          return { ...e };
        });
      }
    });
  }
  const t = await asyncteamuserquestion({
    teamid: Number(chat),
    formdate: dayjs(time.value[0]).unix() * 1000,
    todate: dayjs(time.value[1]).unix() * 1000,
  });
  data7.value = Array.from({ length: 24 }).map((v, k) => {
    const z = t.groupkuserquestion.find((f) => f.hover == k);
    if (z) {
      return {
        name: k + "点",
        count: z.count,
      };
    }
    return {
      name: k + "点",
      count: 0,
    };
  });
  asyncselectchart({
    teamid: Number(chat),
    starttime: dayjs(time.value[0]).unix() * 1000,
    endtime: dayjs(time.value[1]).unix() * 1000,
    timetype: "%Y-%m月",
  }).then((f) => {
    data5.value = f.userquestion.map((e) => {
      return {
        type: e.day,
        count: e.count,
        day: e.day,
      };
    });
    console.log("data5", data5.value);
  });
  timer.value = window.setInterval(() => {
    if (type.value === 2) {
      type.value = 0;
    } else {
      type.value++;
    }
  }, 10000);
});

const JPdom = ref();
const jpdata = ref<Particle>();

function jp() {
  if (JPdom.value) {
    jpdata.value = new JParticles.Particle(JPdom.value, {
      color: "rgba(255,255,255,0.3)",
      proximity: 0.05,
      range: 0.05,
      num: 0.2,
      maxR: 3.7,
      minR: 0.6,
      maxSpeed: 0.8,
      minSpeed: 0.1,
      parallaxStrength: 3,
    });
  }
}

onUnmounted(() => {
  jpdata.value?.onDestroy();
  jpdata.value = undefined;
  window.clearInterval(timer.value);
});
</script>

<style scoped>
.app {
  position: relative;
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 0.3);
}

.el-aside {
  padding-top: 24px;
  height: 100vh;
}

.main {
  --el-main-padding: 24px;
  height: 100vh;
}

.col-left {
  padding-left: 24px;
}

.JPdom {
  position: fixed;
  height: calc(100vh + 64px);
  width: 100vw;
}
</style>

<style>
#sciencechat {
  min-width: 1850px;
}

.myborder {
  background-color: rgba(43, 45, 60, 0.1);
  border: 1px solid #545e72;
  backdrop-filter: blur(5px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 12px;
  width: 640px;
  padding: 12px;
  min-height: 800px;
}
</style>
